<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>base</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <script src="/static/js/bootstrap.bundle.min.js"></script>
    {% load static %}
    <link href="{% static 'fontawesomefree/css/fontawesome.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'fontawesomefree/css/brands.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'fontawesomefree/css/solid.css' %}" rel="stylesheet" type="text/css">
    <script src="{% static 'fontawesomefree/js/fontawesome.js' %}"></script>
    <script src="{% static 'fontawesomefree/js/solid.js' %}"></script>
    <script src="{% static 'fontawesomefree/js/brands.js' %}"></script>
    <link href="{% static '/css/styles.css' %}" rel="stylesheet" type="text/css">
</head>
<style>
    .mybox {
        position: fixed;
        top: 0;
        left:35%;
        width: 30%;
        height: 55px;
        background-color: rgba(124, 175, 138, 0.3);
        color: #000810;
        text-align: center;
        line-height: 55px;
        z-index: 9999; /* 确保覆盖其他所有元素 */
    }
</style>
<div id="myAlert" >
    {% if messages %}
        {% for message in messages %}
               <div class="mybox">
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
</div>
<script>
    // 获取 Alert 元素
    const myAlert = document.getElementById("myAlert");
    // 显示 Alert 元素
    myAlert.style.display = "block";
    // 等待 1.5 秒钟后隐藏 Alert 元素
    setTimeout(function () {
        myAlert.style.display = "none";
    }, 1500);
</script>
{% include 'navbar.html' %}
{% block content %}
{% endblock %}
</html>